import React, { useState, useRef, useEffect } from 'react'
import { useSpring, animated, easings } from 'react-spring'
import * as R from "ramda"
// import "./App.scss"
let colorArr = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"]
export default function App() {
  const list = [
    { id: 0, name: "祁纤", flag: true },
    { id: 1, name: "沉香", flag: true },
    { id: 2, name: "wzksghh", flag: false }
  ]


  // console.log(R.filter(R.whereEq({ flag: true }), list))
  return (
    <div>
      {/* <LoopFunction /> */}
    </div>
  )
}

function LoopFunction() {
  const styles = useSpring({
    loop: { reverse: true },
    from: { y: 0, x: 0 },
    to: { x: 1100, y: 0 },
    config: { duration: 12000, easing: easings.easeOutBounce }
  })

  const ElDivs = []
  for (let i = 0; i < 49; i++) {
    ElDivs.push(<ElDiv key={i}></ElDiv>)
  }

  return (
    <animated.div
      style={{
        width: 400,
        height: 400,
        backgroundColor: '#46e891',
        borderRadius: 16,
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent: "center",
        ...styles,
      }}
    >
      {ElDivs}
    </animated.div >
  )
}

function ElDiv() {
  const [flag, setFlag] = useState(false)
  const [elTop, setElTop] = useState(0)
  const post = useRef(0);

  useEffect(() => {
    const res = post.current.getBoundingClientRect()
    setElTop(res.top)
  }, [])

  const styles = useSpring({
    from: { y: 0, x: 0 },
    to: { y: flag ? 650 - elTop : 0 },
    config: { duration: 2000, easing: easings.easeOutBounce }
  })

  function handleClick() {
    setFlag(!flag)
  }

  return (
    <animated.div
      ref={post}
      onClick={handleClick}
      style={{
        width: 50,
        height: 50,
        margin: "2px",
        backgroundColor: colorArr[Math.floor(Math.random() * 6)],
        borderRadius: 16,
        cursor: 'pointer',
        ...styles,
      }}
    />
  )
}




































// import React, { useState } from 'react'
// import { useSpring, animated, easings } from 'react-spring'

// // import "./App.scss"
// export default function App() {
//   return (
//     <div>
//       <LoopFunction />
//     </div>
//   )
// }

// function LoopFunction() {
//   const [flag, setFlag] = useState(false)
//   const styles = useSpring({
//     // loop: true,
//     from: { y: 0, x: 0 },
//     to: { y: flag ? 500 : 0 , x : flag ? undefined : 500},
//     config: { duration: 2000 , easing:easings.easeOutBounce}
//   })


//   function handleClick() {
//     setFlag(!flag)
//   }

//   return (
//     <animated.div
//       onClick={handleClick}
//       style={{
//         width: 80,
//         height: 80,
//         position: "absolute",
//         backgroundColor: '#46e891',
//         borderRadius: 16,
//         ...styles,
//       }}
//     />
//   )
// }
